<template>
<div class="app">
    <div class="d1" v-for="item in data.val" :key="item">
        <div class="d2">{{item.title}}</div>
        <van-image
        class="v1"
        round
        width="2rem"
        height="2rem"
        :src="item.img"/>
        <div class="d3">{{item.doctorname}}</div>
        <div class="d4">{{item.text}}</div>
        <div class="d5" @click="dj1(item)"><img :src="src" ></div>
        <div class="d6">{{item.lovenum}}</div>
        <img class="i1" src="@/assets/u1349.png" >
        <div class="d7">{{item.leavemessage}}</div>
        
    </div>
    <van-loading size="24px" type="spinner" class="v2">正在加载</van-loading>
</div>
</template>

<script setup lang="ts">
import {beautifulanswer} from '@/api/beautiful.js'
import { reactive, ref } from 'vue';
let data=reactive({
    val:[]
})
let src =ref("/src/assets/u1246.png")
beautifulanswer()
.then((res:any)=>{
    data.val = JSON.parse(JSON.stringify(res.data.data));
})
function dj1(item:any){
    if(src.value=="/src/assets/u1246.png"){
        item.lovenum=item.lovenum+1
        src.value="/src/assets/u1248.png"
    }else if(src.value=="/src/assets/u1248.png"){
        item.lovenum=item.lovenum-1
        src.value="/src/assets/u1246.png"
    }
} 
</script>

<style scoped>
.app{background: #fbf9f6;width: 390px;height:2150px;}
.d1{background: white;width: 100%;height: 200px;margin-bottom: 3%;}
.d2{padding-top: 4%;margin-left: 5%;font-size: 18px;}
.d3{margin-left: 2%;float: left;margin-top: 3%;}
.v1{margin-left: 5%;margin-top: 3%;float: left;}
.d4{margin-top: 14%;padding-left: 5%;padding-right: 5%;text-overflow: ellipsis;overflow: hidden;display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.v2{margin-left: 35%;}
.d5{margin-top: 0%;margin-left: 60%;width: 15px;}
.d6{font-size: 12px;color: #999999;margin-left: 67%;margin-top: -6%;width: 15px;}
.d7{font-size: 12px;color: #999999;width: 15px;margin-left: 88%;margin-top: -5%;}
.i1{margin-left: 80%;margin-top: -4%;float: left;}
</style>